<template>
	<view class="container">
		<view class="profile-info">
			<text class="info-title">个人资料</text>
			<view class="care">
				<text class="info-item">用户名：<text class="info-value">{{ userInfo.userName }}</text></text>
				<text class="info-item">地址：<text class="info-value">{{ userInfo.address }}</text></text>
				<text class="info-item">手机号：<text class="info-value">{{ userInfo.phone }}</text></text>
			</view>
			<button class="edit-btn" @click="editProfile">编辑</button>
		</view>
		<!-- 弹框 -->
		<view v-if="showModal" class="modal">
			<view class="modal-content">
				<text class="modal-title">修改个人信息</text>
				<view class="form-group">
					<text class="label">用户名</text>
					<input class="input" v-model="tempUserInfo.userName" placeholder="请输入用户名"
						@blur="validateUsername" />
					<text v-if="usernameError" class="error-message">{{ usernameError }}</text>
				</view>
				<view class="form-group">
					<text class="label">手机号</text>
					<input class="input" v-model="tempUserInfo.phone" placeholder="请输入手机号" @blur="validatePhone" />
					<text v-if="phoneError" class="error-message">{{ phoneError }}</text>
				</view>
				<view class="button-group">
					<button class="submit-btn" @click="updateInfo">保存</button>
					<button class="close-btn" @click="closeModal">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		http
	} from '/until/request.js'
	
	onLoad((id) => {
		userId.value = id.userId
		console.log("跳页面传来的id")
		console.log(userId.value)
		
		cha(userId.value)
	})
	const showModal = ref(false); // 控制弹框的显示与隐藏
	// 用户信息数据
	const userId = ref(null);
	const userInfo = ref({});
	
	
	const cha = async (id) => {
		const shuju = await http({
			url: '/audit/selectbyid/' + id,
			method: 'get',
		})
		userInfo.value = shuju.data
		console.log(userInfo.value)
	}
	
	
	// 临时数据，用于保存修改
	const tempUserInfo = ref({
		...userInfo.value
	});
	// 错误消息
	const usernameError = ref('');
	const phoneError = ref('');
	const editProfile = () => {
		tempUserInfo.value = {
			...userInfo.value
		};
		showModal.value = true;
	};
	const validateUsername = () => {
		usernameError.value = tempUserInfo.value.userName ? '' : '用户名不能为空';
	};
	const validatePhone = () => {
		const phonePattern = /^1[3-9]\d{9}$/; // 正则表达式用于验证手机号
		phoneError.value = phonePattern.test(tempUserInfo.value.phone) ? '' : '手机号格式不正确';
	};
	const updateInfo = async () => {
		validateUsername();
		validatePhone();
		if (usernameError.value || phoneError.value) {
			uni.showToast({
				title: '请检查输入',
				icon: 'none'
			});
			return;
		}
		try {
			const shuju = await http({
				url: "/audit/updateAudit",
				method: "put",
				data: {
					userId: userId.value,
					userName: tempUserInfo.value.userName,
					phone: tempUserInfo.value.phone
				}
			});
			if (shuju && shuju.data) {
				cha(userId.value)
				userInfo.value = {
					...tempUserInfo.value
				}; // 更新本地状态
				uni.showToast({
					title: '信息已更新',
					icon: 'success'
				});
				
				closeModal();
			} else {
				uni.showToast({
					title: '更新失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('更新信息出错:', error);
			uni.showToast({
				title: '更新失败，请稍后再试',
				icon: 'none'
			});
		}
	};
	const closeModal = () => {
		showModal.value = false; // 将状态设置为 false，关闭模态框
	};
</script>
<style>
	.container {
		padding: 20rpx;
		background-color: #f0f4f8;
		/* 背景色 */
		min-height: 100vh;
	}

	.profile-info {
		background: white;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 30rpx;
	}

	.info-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.info-item {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.info-value {
		font-weight: bold;
		color: #007AFF;
		/* 突出显示的信息 */
	}

	.edit-btn {
		margin-top: 10rpx;
		padding: 10rpx 20rpx;
		background-color: #007AFF;
		color: white;
		border: none;
		border-radius: 5rpx;
		font-size: 30rpx;
		cursor: pointer;
	}

	.care {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 230rpx;
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modal-content {
		background: white;
		border-radius: 15rpx;
		padding: 30rpx;
		width: 90%;
		max-width: 500rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
	}

	.modal-title {
		font-size: 34rpx;
		margin-bottom: 20rpx;
		font-weight: bold;
		text-align: center;
		color: #333;
	}

	.form-group {
		margin-bottom: 20rpx;
	}

	.label {
		display: block;
		margin-bottom: 8rpx;
		font-size: 28rpx;
	}

	.input {
		width: 90%;
		padding: 12rpx;
		border: 1px solid #ccc;
		border-radius: 5rpx;
		font-size: 26rpx;
		transition: border-color 0.3s;
	}

	.input:focus {
		border-color: #007AFF;
		outline: none;
	}

	.error-message {
		color: #ff0000;
		/* 错误信息红色 */
		font-size: 24rpx;
	}

	.button-group {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		width: 475rpx;
	}

	.close-btn {
		width: 45%;
		/* 按钮宽度 */
		padding: 15rpx;
		border: none;
		border-radius: 5rpx;
		font-size: 30rpx;
		cursor: pointer;
		margin-right: 2%;
		/* 添加间距 */
	}

	.submit-btn {
		background-color: #007AFF;
		color: white;
		width: 45%;
		padding: 15rpx;
		border: none;
		border-radius: 5rpx;
		font-size: 30rpx;
		cursor: pointer;
		margin-right: 2%;
		/* 添加间距 */
	}

	.submit-btn:hover {
		background-color: #0056b3;
	}

	.close-btn {
		background-color: #ff0000;
		color: #ffffff;
	}

	.close-btn:hover {
		background-color: #999;
	}
</style>